<template>
  <div>
    <el-container>
      <el-main>
        <div  class="main-select">
          <span>请选择文章分类:&nbsp&nbsp</span>
          <el-select
            v-model="options.id"
            filterable
            placeholder="请选择"
            @change="getAllArticle(options.id)"
            style=" width:300px;"
          >
            <el-option v-for="item in options" :key="item.name" :label="item.code" :value="item.id"></el-option>
          </el-select>
        </div>
        <br>
        <div v-for="temp in allArticle.content">
          <el-card class="box-card" shadow="hover">
            <div class="card-body">
              <div class="text-body">
                <div>
                  <a @click="toArticleDetail(temp)" class="a-title">{{temp.title}}</a>
                </div>
                <br>
                <div>
                  <span>{{temp.detail}}</span>
                </div>
              </div>
              <div class="card-body-tag">
                <el-tag type="info" size="medium" class="title-tag">{{temp.sortName}}</el-tag>
              </div>
            </div>
          </el-card>
          <br>
        </div>
        <!-- 分页 -->
        <el-pagination
          background
          @current-change="pageChange(currentPage)"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="prev, pager, next,jumper"
          :total="allArticle.totalElements"
        ></el-pagination>
      </el-main>

      <el-aside width="25%">
        <template>
          <span>热门文章</span>
          <ol>
            <div v-for=" temp in allHotArticle" class="li-aside">
              <li>
                <a @click="hotToArticleDetail(temp.articleId)">{{temp.articleTitle}}</a>
              </li>
            </div>
          </ol>
        </template>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allArticle: [], //所有文章
      allHotArticle: [], //所有热门文章
      currentPage: 0,
      options: [], //文章转载，分类的枚举值
      sort: null
    };
  },
  methods: {
    // 得到所有的文章
    getAllArticle(sort) {
      this.$axios({
        method: "get",
        url: "/article/getArticle",
        params: {
          page: 1,
          size: 10,
          sort: sort
        }
      }).then(successResponse => {
        this.allArticle = successResponse.data;
      });
    },
    // 页码改变
    pageChange(pageNum) {
      this.$axios({
        method: "get",
        url: "/article/getArticle",
        params: {
          sort: 0,
          page: pageNum,
          size: 10
        }
      }).then(successResponse => {
        this.allArticle = successResponse.data;
        // console.log(this.allArticle);
      });
    },
    // 得到所有的热门文章
    getAllHotArticle() {
      this.$axios({
        method: "get",
        url: "/hotArticle/getAllHotArticle"
      }).then(successResponse => {
        this.allHotArticle = successResponse.data;
      });
    },
    // 跳转到文章详情界面，并且传递过去文章数据
    toArticleDetail(data) {
      let article = JSON.stringify(data);
      this.$router.push({ path: "/articleDetail", query: { data: article } });
    },
    hotToArticleDetail(data) {
      // 得到文章的id，然后从数据查出这个id文章的所有数据
      this.$axios({
        method: "get",
        url: "/article/getOneArticle",
        params: { articleId: data }
      }).then(successResponse => {
        let article = JSON.stringify(successResponse.data);
        this.$router.push({ path: "/articleDetail", query: { data: article } });
      });
    },
    //获得文章分类
    getSort() {
      this.$axios
        .get("/sort/getSort")
        .then(successResponse => {
          this.options = successResponse.data;
        })
        .catch(failResponse => {}); //失败后的操作
    }
  },
  created() {
    this.getSort();
    this.getAllArticle(0);
    this.getAllHotArticle();
  }
};
</script>


<style scoped>
.el-aside {
  background-color: #d3dce6;
  color: #333;
  line-height: 50px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

/* 下面是卡片 */
.a-title {
  font-size: 25px;
  color: #303133;
  /* 去掉下划线 */
  text-decoration: none;
}

.item {
  padding: 10%;
}
/* 文章卡片 */
.box-card {
  margin-left: 5%;
  width: 90%;
  height: 200px;
}

.card-body {
  height: 100%;
  width: 100%;
}

.card-body-image {
  float: left;
  height: 100%;
  width: 25%;
}

.title-tag {
  float: right;
}

.text-body {
  margin-left: 8%;
  float: left;
}

.main-select {
  margin-left: 5%;
  height: 70px;
  float: left;
}
</style>
